/*
 * uCharts®
 * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
 * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
 * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
 * 复制使用请保留本段注释，感谢支持开源！
 * 
 * uCharts®官方网站
 * https://www.uCharts.cn
 * 
 * 开源地址:
 * https://gitee.com/uCharts/uCharts
 * 
 * uni-app插件市场地址：
 * http://ext.dcloud.net.cn/plugin?id=271
 * 
 */

// 通用配置项

// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];

const cfe = {
  //demotype为自定义图表类型
  "type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge", "candle", "demotype"],
  //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
  "categories": ["line", "column", "area", "radar", "gauge", "candle", "demotype"],
  //instance为实例变量承载属性，option为eopts承载属性，不要删除
  "instance": {},
  "option": {},
  //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
  "formatter": {
    tooltipFormat: (params) => {
      // console.log(params);
      // 格式化tooltip后面加上单位
      if (params instanceof Array) {  // 柱子图等
        let result = ''
        params.forEach(function (item) {
          //reValue 针对返回值为 '--'时， 设置value为0 (显示柱子最小高度问题)； 提示真实数据'--'
          result += ` <view style="display: flex; justify-content: space-between; line-height: 20px;">
												<view style="padding-right: 20px">${item.marker} ${item.seriesName}</view>
												<view>
													${item.data && item.data.reValue ? item.data.reValue :
              item.data && item.data.value !== null && !isNaN(item.data.value) ? item.data.value : '-'}
													${item.data && item.data.u ? item.data.u : ''}
												</view>
											</view>`
        })
        return `<view>${params[0].axisValue}</view>${result}`

      } else if (params instanceof Object) {   //饼图等
        return `<view style="display: flex; justify-content: space-between; line-height: 20px;">
												<view style="padding-right: 20px">${params.marker} ${params.data.name}</view>
												<view>${params.data.value}${params.data.u}</view>
											</view>`
      }
    },
    "tooltipDemo1": function (res) {
      let result = ''
      for (let i in res) {
        if (i == 0) {
          result += res[i].axisValueLabel + '年销售额'
        }
        let value = '--'
        if (res[i].data !== null) {
          value = res[i].data
        }
        // #ifdef H5
        result += '\n' + res[i].seriesName + '：' + value + ' 万元'
        // #endif

        // #ifdef APP-PLUS
        result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
        // #endif
      }
      return result;
    },
    legendFormat: function (name) {
      return "自定义图例+" + name;
    },
    yAxisFormatDemo: function (value, index) {
      return value + '元';
    },
    seriesFormatDemo: function (res) {
      return res.name + '年' + res.value + '元';
    }
  },
  //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
  "demotype": {
    "color": color,
    //在这里填写echarts的option即可

  },
  //下面是自定义配置，请添加项目所需的通用配置
  "column": {
    "color": color,
    "title": {
      "text": ''
    },
    "tooltip": {
      "trigger": 'axis'
    },
    "grid": {
      "top": 30,
      "bottom": 50,
      "right": 15,
      "left": 40
    },
    "legend": {
      "bottom": 'left',
    },
    "toolbox": {
      "show": false,
    },
    "xAxis": {
      "type": 'category',
      "axisLabel": {
        "color": '#666666'
      },
      "axisLine": {
        "lineStyle": {
          "color": '#CCCCCC'
        }
      },
      "boundaryGap": true,
      "data": []
    },
    "yAxis": {
      "type": 'value',
      "axisTick": {
        "show": false,
      },
      "axisLabel": {
        "color": '#666666'
      },
      "axisLine": {
        "lineStyle": {
          "color": '#CCCCCC'
        }
      },
    },
    "seriesTemplate": {
      "name": '',
      "type": 'bar',
      "data": [],
      "barwidth": 20,
      "label": {
        "show": true,
        "color": "#666666",
        "position": 'top',
      },
    },
  },
  "line": {
    "color": color,
    "title": {
      "text": ''
    },
    "tooltip": {
      "trigger": 'axis'
    },
    "grid": {
      "top": 30,
      "bottom": 50,
      "right": 15,
      "left": 40
    },
    "legend": {
      "bottom": 'left',
    },
    "toolbox": {
      "show": false,
    },
    "xAxis": {
      "type": 'category',
      "axisLabel": {
        "color": '#666666'
      },
      "axisLine": {
        "lineStyle": {
          "color": '#CCCCCC'
        }
      },
      "boundaryGap": true,
      "data": []
    },
    "yAxis": {
      "type": 'value',
      "axisTick": {
        "show": false,
      },
      "axisLabel": {
        "color": '#666666'
      },
      "axisLine": {
        "lineStyle": {
          "color": '#CCCCCC'
        }
      },
    },
    "seriesTemplate": {
      "name": '',
      "type": 'line',
      "data": [],
      "barwidth": 20,
      "label": {
        "show": true,
        "color": "#666666",
        "position": 'top',
      },
    },
  },
  "area": {
    "color": color,
    "title": {
      "text": ''
    },
    "tooltip": {
      "trigger": 'axis'
    },
    "grid": {
      "top": 30,
      "bottom": 50,
      "right": 15,
      "left": 40
    },
    "legend": {
      "bottom": 'left',
    },
    "toolbox": {
      "show": false,
    },
    "xAxis": {
      "type": 'category',
      "axisLabel": {
        "color": '#666666'
      },
      "axisLine": {
        "lineStyle": {
          "color": '#CCCCCC'
        }
      },
      "boundaryGap": true,
      "data": []
    },
    "yAxis": {
      "type": 'value',
      "axisTick": {
        "show": false,
      },
      "axisLabel": {
        "color": '#666666'
      },
      "axisLine": {
        "lineStyle": {
          "color": '#CCCCCC'
        }
      },
    },
    "seriesTemplate": {
      "name": '',
      "type": 'line',
      "data": [],
      "areaStyle": {},
      "label": {
        "show": true,
        "color": "#666666",
        "position": 'top',
      },
    },
  },
  "pie": {
    "color": color,
    "title": {
      "text": ''
    },
    "tooltip": {
      "trigger": 'item'
    },
    "grid": {
      "top": 40,
      "bottom": 30,
      "right": 15,
      "left": 15
    },
    "legend": {
      "bottom": 'left',
    },
    "seriesTemplate": {
      "name": '',
      "type": 'pie',
      "data": [],
      "radius": '50%',
      "label": {
        "show": true,
        "color": "#666666",
        "position": 'top',
      },
    },
  },
  "ring": {
    "color": color,
    "title": {
      "text": ''
    },
    "tooltip": {
      "trigger": 'item'
    },
    "grid": {
      "top": 40,
      "bottom": 30,
      "right": 15,
      "left": 15
    },
    "legend": {
      "bottom": 'left',
    },
    "seriesTemplate": {
      "name": '',
      "type": 'pie',
      "data": [],
      "radius": ['40%', '70%'],
      "avoidLabelOverlap": false,
      "label": {
        "show": true,
        "color": "#666666",
        "position": 'top',
      },
      "labelLine": {
        "show": true
      },
    },
  },
  "rose": {
    "color": color,
    "title": {
      "text": ''
    },
    "tooltip": {
      "trigger": 'item'
    },
    "legend": {
      "top": 'bottom'
    },
    "seriesTemplate": {
      "name": '',
      "type": 'pie',
      "data": [],
      "radius": "55%",
      "center": ['50%', '50%'],
      "roseType": 'area',
    },
  },
  "funnel": {
    "color": color,
    "title": {
      "text": ''
    },
    "tooltip": {
      "trigger": 'item',
      "formatter": "{b} : {c}%"
    },
    "legend": {
      "top": 'bottom'
    },
    "seriesTemplate": {
      "name": '',
      "type": 'funnel',
      "left": '10%',
      "top": 60,
      "bottom": 60,
      "width": '80%',
      "min": 0,
      "max": 100,
      "minSize": '0%',
      "maxSize": '100%',
      "sort": 'descending',
      "gap": 2,
      "label": {
        "show": true,
        "position": 'inside'
      },
      "labelLine": {
        "length": 10,
        "lineStyle": {
          "width": 1,
          "type": 'solid'
        }
      },
      "itemStyle": {
        "bordercolor": '#fff',
        "borderwidth": 1
      },
      "emphasis": {
        "label": {
          "fontSize": 20
        }
      },
      "data": [],
    },
  },
  "gauge": {
    "color": color,
    "tooltip": {
      "formatter": '{a} <br/>{b} : {c}%'
    },
    "seriesTemplate": {
      "name": '业务指标',
      "type": 'gauge',
      "detail": { "formatter": '{value}%' },
      "data": [{ "value": 50, "name": '完成率' }]
    },
  },
  "candle": {
    "xAxis": {
      "data": []
    },
    "yAxis": {},
    "color": color,
    "title": {
      "text": ''
    },
    "dataZoom": [{
      "type": 'inside',
      "xAxisIndex": [0, 1],
      "start": 10,
      "end": 100
    },
    {
      "show": true,
      "xAxisIndex": [0, 1],
      "type": 'slider',
      "bottom": 10,
      "start": 10,
      "end": 100
    }
    ],
    "seriesTemplate": {
      "name": '',
      "type": 'k',
      "data": [],
    },
  }
}

export default cfe;